import { getBanners, getSongMenu } from '../../service/api_music'
import queryRect from '../../utils/query-rect'
import { throttle } from '../../utils/throttle'
import { bangdanStore, playerStore } from '../../store/index'

const throttleRect = throttle(queryRect, 1000)
Page({
	data: {
		// 轮播图
		banners: [],
		swiperHeight: 0,
		flag: true,
		// 歌曲推荐
		recommendSongs: [],
		// 热门/推荐 歌单
		hotSongMenu: [],
		recommendSongMenu: [],
		// 将新歌/原创/飙升的信息进行组织
		songInfoMenus: [],

		currentSong: {},
		isPlaying: false
	},
	// 网络请求
	getPageData() {
		// 获取排行榜的监听
		getBanners().then(res => {
			// setData设置data数据时,是同步的
			// 渲染wxml是异步的
			this.setData({ banners: res.banners })
		}),
		getSongMenu().then(res => {
			this.setData({ hotSongMenu: res.playlists })
		}),
		getSongMenu('华语', 6, 0).then(res => {
			this.setData({ recommendSongMenu: res.playlists })
		}) 
		// 播放器的监听
		playerStore.onStates(['currentSong', 'isPlaying'], ({ currentSong, isPlaying }) => {
			// 必须判断,第一次监听为undefined时,你点击就会报错
			if(currentSong) this.setData({ currentSong })
			if(isPlaying !== undefined) this.setData({ isPlaying })
		})
	},

	onLoad(options) {
		// 测试代码 首页播放歌曲
		// playerStore.dispatch('playMusicWithSongIdAction', { id:'1891469546' })

		// 获取页面数据
		this.getPageData()

		// 请求共享数据
		bangdanStore.dispatch('getBnagdanDataActions')

		// 从bangdanStore中获取数据
		bangdanStore.onState('hotBangdans', res => {
			if(!res.tracks) return
			this.setData({ recommendSongs: res.tracks.slice(0, 6) })
		})

		// 将新歌/原创/飙升的信息进行组织
		bangdanStore.onState('newBangdans', res => {
			if(!res.tracks) return
			const name = res.name
			const coverImgUrl = res.coverImgUrl
			const songList = res.tracks.slice(0, 3)
			const playCount = res.playCount
			const newInfo = { name, coverImgUrl, songList, playCount }
			const originInfo = this.data.songInfoMenus
			originInfo.push(newInfo)
			this.setData({ songInfoMenus: originInfo })
		})
		bangdanStore.onState('originBangdans', res => {
			if(!res || !res.tracks) return
			const name = res.name
			const coverImgUrl = res.coverImgUrl
			const songList = res.tracks.slice(0, 3)
			const playCount = res.playCount
			const newInfo = { name, coverImgUrl, songList, playCount }
			const originInfo = this.data.songInfoMenus
			originInfo.push(newInfo)
			this.setData({ songInfoMenus: originInfo })
		})
		bangdanStore.onState('upBangdans', res => {
			if(!res || !res.tracks) return
			const name = res.name
			const coverImgUrl = res.coverImgUrl
			const songList = res.tracks.slice(0, 3)
			const playCount = res.playCount
			const newInfo = { name, coverImgUrl, songList, playCount }
			const originInfo = this.data.songInfoMenus
			originInfo.push(newInfo)
			this.setData({ songInfoMenus: originInfo })
		})
	},
	// 搜索框跳转搜索页面
	SearchClick() {
		wx.navigateTo({
			url: '/packageDetail/pages/detail-search/index',
		})
	},
	// 处理轮播图的高度问题(swiper默认高度,图片widthFix,不一样大)
	// 对加载进行节流处理
	handleImageLoad() {
		throttleRect('.swiper-image').then(res => {
			if(!res || !res[0]) return 
			this.setData( { swiperHeight: res[0].height } )
		})
	},

	handlePlayBtnClick(event) {
		playerStore.dispatch('changeMusicPlayStatuAction', !this.data.isPlaying)
		// 小程序没有cancelBubble/stopPropagation,使用 catchtap 事件不会向上传递
		// event.cancelBubble = true
		// event.stopPropagation() //小程序没有这个方法
	},

	// 右边点击发射出来的事件进行处理
	handleMoreClick(event) {
		const info = event.currentTarget.dataset.info
		this.navigateToPages(info)
	},
	handleBangdanClick(event) {
		const info = event.currentTarget.dataset.info
		this.navigateToPages(info)
	},
	navigateToPages(info) {
		wx.navigateTo({
			url: `/packageDetail/pages/detail-songs/index?bangdan=${info}&type=bd`,
		})
	},
	// song-item-v1的点击
	handleSongItemClick(event) {
		const index = event.currentTarget.dataset.index
		playerStore.setState('playSongsList', this.data.recommendSongs)
		playerStore.setState('playSongIndex', index)
	},
	// play-bar的点击
	handlePlayBarClick() {
		const id = this.data.currentSong.id
		if(!id) return
		wx.navigateTo({
			url: '/pages/music-player/index?id='+ id
		})
	}
})
